<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>
<script>
import { refreshRouter } from "@/router/index";
import router from "./router";

export default {
  data() {
    return {
      isRouterAlive: true
    };
  },
  name: "App",
  /**********解决在组件中刷新当前页面,提供较好的用户体验刷新,在需要使用的组件中:  inject: ['reload']  *************/
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function() {
        this.isRouterAlive = true;
      });
    }
  },
  provide() {
    return {
      reload: this.reload
    };
  },
  /**********解决在组件中刷新当前页面,提供较好的用户体验刷新*************/

  /*解决 vuex数据在页面刷新,state数据丢失   菜单数据处理*/
  created() {
    //在页面加载时读取sessionStorage里的状态信息
    if (window.sessionStorage.getItem("menuData")) {
      //this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(window.sessionStorage.getItem("menuData"))))
      console.log("ttttt", window.sessionStorage.getItem("menuData"));
      this.$store.commit(
        "setMenus",
        JSON.parse(window.sessionStorage.getItem("menuData"))
      );
    }
    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      window.sessionStorage.setItem(
        "menuData",
        JSON.stringify(this.$store.state)
      );
    });
    //当前路由信息
    let mm = this.$router.options.routes;
    router.addRoutes(mm);
    console.log("mmm", mm);
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
